<template>
  <!-- <div class="pageContent"> -->
  <!--  <div class="centerAll">
    </div> -->
  <el-row :gutter="20">
    <el-col :span="16">
      <div class="pageContent">
        <div class="centerAll">消息</div>
      </div>
    </el-col>
    <el-col :span="8">
      <div class="pageContent">
        <div class="centerAll">代办</div>
      </div>
    </el-col>
  </el-row>
  <!-- </div> -->
</template>

<script>
  // https://element-plus.gitee.io/#/zh-CN/component/layout
  // element-plus响应式布局分24栏, 为简化只关注xs,sm和lg。分别是小于768px,大于768px和大于1200px
  // 数字增加 https://blog.csdn.net/sunny123x/article/details/102589067
  // 请求动画帧 https://github.com/PanJiaChen/vue-countTo/blob/master/src/requestAnimationFrame.js
  import {
    onMounted,
    ref
  } from 'vue'
  import * as echarts from 'echarts'
  import Cards from './components/Cards.js'
  import Todo from '/src/components/Todo/index.vue'
  import EasyNav from '/src/components/EasyNav/index.vue'
  import pie1option from './options/pie1option'
  import navList from './options/navList'

  export default {
    name: 'Dashboard',
    components: {
      Todo,
      Cards,
      EasyNav
    },
    setup() {
      const shop = ref(null)

      onMounted(() => {
        let myChart = echarts.init(shop.value)
        myChart.setOption(pie1option)
        window.addEventListener('resize', () => myChart.resize(), {
          passive: true
        })
      })

      return {
        shop,
        navList
      }
    },
  }
</script>

<style lang="scss" scoped>
  .el-col {
    margin-bottom: 4px;
  }
</style>